<template>
  <div class="a">
    <ul v-for="(item, index) in address1" :key="index">
      <li >
        <div class="choose" @click="choose(item.address_id)">
        <div class="div">姓名:{{ item.name }}</div>
        <div class="div">电话:{{ item.phone }}</div>
        <div class="div">地址:{{ item.address }}</div>
        </div>
        
        <a @click.prevent="shan(item.address_id)"><div>删除</div></a>
      </li>
    </ul>
    <button type="button" @click.prevent="go()">新增</button>
  </div>
</template>
<script>
import { fapi } from "@/assets/js/farmapi.js";
export default {
  data() {
    return {
      address1: [],
    };
  },
  created() {
    this.address();
  },
  methods: {
    address() {
      let data = {
        userId: sessionStorage.getItem("islogin"),
      };
      fapi("api/listaddress", data).then((res) => {
        // console.log(res);
        this.address1 = res.data.data;
        // console.log(this.address1);
      });
    },
    choose(address_id) {
      this.$router.push({
        name: "order",
        query: {
          address_id: address_id,
        },
        
      });
    },shan(address_id){
        let data={
          userId:sessionStorage.getItem("islogin"),
          address_id:address_id
        }
        fapi("api/deleteAddress", data).then((res) => {
        if(res.data.code ==200){
        this.address()
     }
        
      });
        },go(){
          this.$router.push('/address')
        }
  },
};
</script>
<style lang="less" scoped>
.div{
  width: 330px;
  margin-top: 30px;
  margin-left: 50%;
  transform: translateX(-50%);
 
}
.a{
  width:100%;
  margin-top: 30px;
  margin-left: 50%;
  transform: translateX(-50%);
 
}
ul{
    background-color:rgb(222, 225, 230) ;
    font-size: 36px;
    width: 80%;
    margin-left: 80px;
}
button{
  width: 250px;
  height: 80px;
  margin: 100px 30%;
  color: #fff;
  background-color: rgb(165, 42, 42);
  font-size: 40px;
}
a{
  display: inline-block;
  width: 100%;
}
a div{
  margin-left: 80%;
}
</style>